<template>
    <div class="box1">
      <m-head title="我的教材"></m-head>
      <div class="list">
        <div class="item" @click="$router.push({path: '/jiaocaicontent', query:{id:info.textbook_id, isMine: true}})">
          <img :src="info.Textbook.cover" alt="">
          <div class="info">
            <h3>{{info.Textbook.title}}</h3>

          </div>
          <span class="arrow"></span>
        </div>
      </div>
    </div>
</template>

<script>
import MHead from './MHeader'
import * as user from '../api/user'
export default {
  name: 'myjiaocai',
  components: {
    'm-head': MHead
  },
  data: function () {
    return {
      id: 0,
      info: {
        Textbook: {
          cover: ''
        }
      }
    }
  },
  mounted () {
    this.getBookList()
  },
  methods: {
    getBookList: function () {
      user.myTextbook()
        .then(res => {
          this.info = res.data
          console.log('教材列表', res.data)
        })
    }
  }
}
</script>

<style scoped>
.item{
  border-bottom: 1px solid #e1e1e1;
  padding: .2rem .3rem;
  position: relative;
  color: #000;
  ddisplay: flex;
  display: -webkit-flex;
  justify-content: space-between;
  align-items: center;
}
.item img{
  width: 2.4rem;
  flex-shrink: 0;
  border: 1px solid #e1e1e1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.item .info{
  flex-grow: 1;
  padding-left: .2rem;
  font-size: .4rem;
  color: #000;
}
.item .arrow{
  right: .3rem;
}
.info{
  width: 7.2rem;
}
</style>
